<template>
	<div class="newdisc">
		<div class="newdisc-content">
			<div class="hot-title">
				<h2>热门新碟</h2>
			</div>

			<div class="hot-content">
				<div class="hot-disc" v-for="item in newcd" :key="item.id">
					<div class="hot-img">
						<img :src="item.picUrl" alt="" />
						<a href="" class="msk"></a>
						<a href="#" class="icon-play"></a>
					</div>
					<p>
						<a href="#">{{ item.name }}</a>
					</p>
					<span>{{ item.artists[0].name }}</span>
				</div>
			</div>
		</div>

		<div class="all-title">
			<h2>全部新碟</h2>
			<nav class="nav">
				<span @click="cur" data-cur="0">全部</span>|
				<span @click="cur" data-cur="1">华语</span>|
				<span @click="cur" data-cur="2">欧美</span>|
				<span @click="cur" data-cur="3">韩国</span>|
				<span @click="cur" data-cur="4">日本</span>
			</nav>
		</div>

		<div class="all-content">
			<div class="all-disc" v-for="(item, index) in newDatas" :key="item.id">
				<div class="all-img">
					<img :src="item.picUrl" alt="" />
					<a href="" class="msk"></a>
					<a href="" class="icon-play"></a>
				</div>
				<p>
					<a href="#">{{ index.name }}</a>
				</p>
				<span>{{ item.artists[0].name }}</span>
			</div>
		</div>

		<PaginationComp
			v-model:current-page="currentPage"
			v-model:page-size="pageSize"
			:total="total"
		/>
	</div>
</template>

<script>
export default {
	name: "NewDisc",
};
</script>

<script setup>
import { onMounted, ref } from "vue";
import { getNewCD } from "@/api/newDisc";
import PaginationComp from "@/components/PaginationComp";

const newcd = ref([]);
const curs = ref(0);
const newDatas = ref([]);

const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);

onMounted(async () => {
	getNewCDs();
	const data = await getNewCD(0, 10);
	newcd.value = data.albums;
});

const cur = async (e) => {
	// console.log(e.target.dataset.cur);
	curs.value = e.target.dataset.cur;
	const newData = await getNewCD(curs.value + 10, 20);
	newDatas.value = newData.albums;
};

const getNewCDs = async () => {
	const res = await getNewCD(currentPage.value, pageSize.value);
	console.log(res);
};
</script>

<style>
.newdisc {
	margin: 0 auto;
	padding: 40px;
	width: 900px;
	background: rgb(255, 255, 255);
	border: 1px solid rgb(211, 211, 211);
	border-width: 0px 1px;
}

.hot-title,
.all-title {
	margin: 0;
	width: 900px;
	height: 40px;
	border-bottom: 2px solid rgb(194, 12, 12);
}

.hot-title h2,
.all-title h2 {
	font-size: 24px;
	font-weight: normal;
}

.hot-content,
.all-content {
	padding-top: 20px;
	padding-bottom: 20px;
	width: 900px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.hot-img,
.all-img {
	position: relative;
	width: 130px;
	height: 130px;
}
.hot-img img,
.all-img img {
	width: 100%;
	height: 100%;
}
.hot-img .msk,
.all-img .msk {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	width: 153px;
	height: 130px;
	background: url(../../../assets/image/coverall.png) no-repeat;
	background-position: 0 -845px;
}

.hot-img .icon-play,
.all-img .icon-play {
	display: none;
	position: absolute;
	left: 94px;
	right: 10px;
	bottom: 5px;
	width: 28px;
	height: 28px;
	background: url(../../../assets/image/iconall.png) no-repeat;
	background-position: 0 -140px;
}
.hot-img .icon-play:hover {
	background-position: 0 -170px;
}
.all-img .icon-play:hover {
	background-position: 0 -170px;
}

.hot-img:hover .icon-play {
	display: block;
}
.all-img:hover .icon-play {
	display: block;
}

.hot-disc,
.all-disc {
	padding-bottom: 10px;
	width: 153px;
	height: 173px;
}
.hot-disc p {
	padding: 5px 0;
}
.hot-disc p a {
	font-size: 12px;
}

.all-title {
	display: flex;
	align-items: flex-end;
}

.all-title h2 {
	padding-right: 10px;
}

.all-title .nav span {
	padding-left: 10px;
	padding-right: 10px;
}
</style>
